<template>
  <b-col v-if="result.total != 0">
    <!-- 头像和用户名 -->
    <b-row>
      <b-col v-for="r in result.data" :key="r.id">
        <b-row>
          <b-col class="col-auto pt-2">
            <b-img-lazy blank-src="https://s1.imagehub.cc/images/2023/03/11/64854baae2c410c756c1e1c6aaf4dc32.png" class="bg-white border" rounded="circle"
              height="40" width="40" :src="r.headUrl" />
          </b-col>
          <b-col class="col-auto">
            <b-row class="pt-1">
              <b-col class="col-auto pl-1 pr-0">
                {{r.name}}
              </b-col>
              <b-col class="col-auto pl-2">
                <b-badge>
                  {{r.level}}
                </b-badge>
              </b-col>
            </b-row>
            <b-row>
              {{r.text}}
            </b-row>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
    <!-- 翻页 -->
    <b-row v-if="result.total > 10">
      <b-col>
        <b-pagination-nav prev-text="上一页" next-text="下一页" use-router :base-url="'SearchResult?text='+this.$route.query.text+'&page='" :value="result.page"
          align="center" size="md" :number-of-pages="Math.ceil(result.total/10)" />
      </b-col>
    </b-row>
  </b-col>
  <b-col v-else class="text-center mt-3">
    <h4>
      没有搜索到哦
    </h4>
  </b-col>
</template>
<script>
export default {
  props: {
    text: String,
  },
  data() {
    return {
      result: {
        total: 0
      },
    }
  },
  mounted() {
    this.search(this.text, this.$route.query.page);
  },
  methods: {
    // 获取搜索结果
    search(text, page) {
      this.$httpIssue.search(text, page, "user").then((res) => {
        // console.log(res);
        this.result = res;
      }).catch((err) => {
        if (err == "timeOut") {
          this.timeOut = true;
        }
      });
    },
  },
}
</script>
<style scoped>
</style>
